<div *ngIf="groupByTeam">
  <div id="team-panel" *ngFor="let teamInfo of teamsToUsers | keyvalue">
    <div class="card top-padded">
      <h6 id="team-header" class="card-header alert alert-warning alert-no-bottom cursor-pointer" role="button" (click)="teamExpanded[teamInfo.key] = !teamExpanded[teamInfo.key]">
        {{ teamInfo.key === '-' ? 'No Specific Team': teamInfo.key }}
        <div class="card-header-btn-toolbar">
          <tm-panel-chevron [isExpanded]="teamExpanded[teamInfo.key]"></tm-panel-chevron>
        </div>
      </h6>
      <div *ngIf="teamExpanded[teamInfo.key]" @collapseAnim>
        <div class="card-body background-color-warning">
          <div *ngIf="teamsToQuestions[teamInfo.key] && teamsToQuestions[teamInfo.key].length && showStatistics">
            <h3>{{ teamInfo.key }} Statistics for {{ isGqr ? 'Given' : 'Received' }} Responses</h3>
            <div id="team-statistics" class="card top-padded alert-primary-border" *ngFor="let question of teamsToQuestions[teamInfo.key]">
              <div class="card-header alert alert-primary alert-no-bottom">
                <tm-question-text-with-info [questionNumber]="question.feedbackQuestion.questionNumber"
                                            [questionDetails]="question.feedbackQuestion.questionDetails"
                ></tm-question-text-with-info>
              </div>
              <div class="card-body top-padded-small">
                <tm-single-statistics [responses]="question.allResponses"
                                      [question]="question.feedbackQuestion.questionDetails"
                                      [statistics]="question.questionStatistics"
                                      [recipientType]="question.feedbackQuestion.recipientType"
                                      [displayContributionStats]="false"
                ></tm-single-statistics>
              </div>
            </div>
          </div>
          <h3 class="top-padded">{{ teamInfo.key }} Detailed Responses</h3>
          <div *ngFor="let userInfo of teamInfo.value">
            <ng-container
                    [ngTemplateOutlet]="userTab"
                    [ngTemplateOutletContext]="{userInfo:userInfo}">
            </ng-container>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div *ngIf="!groupByTeam">
  <div *ngFor="let userInfo of userExpanded | keyvalue">
    <ng-container
        [ngTemplateOutlet]="userTab"
        [ngTemplateOutletContext]="{userInfo:userInfo.key}">
    </ng-container>
  </div>
</div>
<div *ngIf="(groupByTeam && !(teamsToUsers | keyvalue)?.length) || (!groupByTeam && !(userExpanded | keyvalue)?.length)">
  <i>There are no responses for this section or you may not have the permission to see the response.</i>
</div>

<ng-template #userTab let-userInfo='userInfo'>
  <div id="user-panel" class="card top-padded border-primary">
    <h6 id="user-header" class="card-header bg-primary text-white cursor-pointer" role="button" (click)="userExpanded[userInfo] = !userExpanded[userInfo]">
      <div>
        {{ isGqr ? 'From' : 'To' }}:
        {{ userInfo === '-' ? 'No Specific User' : userInfo }}
        <a *ngIf="userToEmail[userInfo]" [href]="'mailto:' + userToEmail[userInfo]" class="text-white" (click)="$event.stopPropagation()">
          [{{ userToEmail[userInfo] }}]
        </a>
      </div>
      <div class="card-header-btn-toolbar">
        <tm-response-moderation-button class="btn-margin-right" *ngIf="isGqr && userToRelatedEmail[userInfo]" [session]="session"
                                       [relatedGiverEmail]="userToRelatedEmail[userInfo]"
                                       [isGiverInstructor]="userIsInstructor[userInfo]" btnStyle="PRIMARY"></tm-response-moderation-button>
        <tm-panel-chevron [isExpanded]="userExpanded[userInfo]"></tm-panel-chevron>
      </div>
    </h6>
    <div *ngIf="userExpanded[userInfo]" @collapseAnim>
      <div class="card-body top-padded-0">
        <div id="question-panel-{{ question.questionOutput.feedbackQuestion.questionNumber }}" class="card top-padded alert-primary-border" *ngFor="let question of responsesToShow[userInfo]">
          <div class="card-header alert alert-primary alert-no-bottom cursor-pointer" (click)="question.isTabExpanded = !question.isTabExpanded">
            <tm-question-text-with-info [questionNumber]="question.questionOutput.feedbackQuestion.questionNumber"
                                        [questionDetails]="question.questionOutput.feedbackQuestion.questionDetails"
            ></tm-question-text-with-info>
            <div class="card-header-btn-toolbar">
              <tm-panel-chevron [isExpanded]="question.isTabExpanded"></tm-panel-chevron>
            </div>
          </div>
          <div *ngIf="question.isTabExpanded" @collapseAnim>
            <div class="card-body top-padded-small table-responsive">
              <tm-single-statistics *ngIf="showStatistics"
                                    [responses]="question.questionOutput.allResponses"
                                    [question]="question.questionOutput.feedbackQuestion.questionDetails"
                                    [statistics]="question.questionOutput.questionStatistics"
                                    [recipientType]="question.questionOutput.feedbackQuestion.recipientType"
                                    [displayContributionStats]="false"
              ></tm-single-statistics>
              <tm-per-question-view-responses [responses]="question.questionOutput.allResponses" [section]="section" [sectionType]="sectionType" [session]="session"
                                              [statistics]="question.questionOutput.questionStatistics"
                                              [indicateMissingResponses]="indicateMissingResponses" [showGiver]="!isGqr" [showRecipient]="isGqr" [question]="question.questionOutput.feedbackQuestion"
                                              [instructorCommentTableModel]="instructorCommentTableModel"
                                              (instructorCommentTableModelChange)="triggerModelChange($event)"
                                              (saveNewCommentEvent)="triggerSaveNewCommentEvent($event)"
                                              (deleteCommentEvent)="triggerDeleteCommentEvent($event.responseId, $event.index)"
                                              (updateCommentEvent)="triggerUpdateCommentEvent($event.responseId, $event.index)"
              ></tm-per-question-view-responses>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</ng-template>
